<template>
	<view class="container">
		<!-- 顶部收支概览 -->
		<view class="overview-section">
			<view class="month-selector">
				<view class="month-nav">
					<text class="nav-btn" @click="changeMonth(-1)">‹</text>
					<text class="month-text">{{currentMonth}}月</text>
					<text class="nav-btn" @click="changeMonth(1)">›</text>
				</view>
				<text class="year-text">{{currentYear}}</text>
			</view>
			<view class="balance-info">
				<view class="balance-item">
					<text class="balance-label">本月支出</text>
					<text class="balance-amount expense">¥{{monthlyExpense}}</text>
				</view>
				<view class="balance-item">
					<text class="balance-label">本月收入</text>
					<text class="balance-amount income">¥{{monthlyIncome}}</text>
				</view>
				<view class="balance-item">
					<text class="balance-label">结余</text>
					<text class="balance-amount balance">¥{{monthlyBalance}}</text>
				</view>
			</view>
		</view>

		<!-- 快速记账按钮 -->
		<view class="quick-add-section">
			<view class="quick-add-btn" @click="showAddModal">
				<text class="quick-add-icon">+</text>
				<text class="quick-add-text">记一笔</text>
			</view>
		</view>

		<!-- 最近记录 -->
		<view class="recent-section">
			<view class="section-header">
				<text class="section-title">最近记录</text>
				<text class="section-more" @click="viewAllRecords">查看全部</text>
			</view>
			<!-- 加载状态 -->
			<view v-if="isLoading && isFirstLoad" class="loading-state">
				<view class="loading-spinner"></view>
				<text class="loading-text">正在加载记录...</text>
			</view>
			<!-- 记录列表 -->
			<view class="record-list" v-else-if="recentRecords.length > 0">
				<view v-for="record in recentRecords" :key="record.id" class="record-item" @click="editRecord(record)">
					<view class="record-icon">
						<text class="icon-text">{{record.categoryIcon}}</text>
					</view>
					<view class="record-info">
						<view class="record-main-line">
							<text class="record-category">{{record.categoryName}}</text>
							<text class="record-note">{{record.note || '无备注'}}</text>
						</view>
						<view class="record-sub-line">
							<view class="account-info">
								<text class="account-icon">{{record.accountIcon || (record.accountId ? '💳' : '📝')}}</text>
								<text class="account-name">{{record.accountName || (record.accountId ? '未知账户' : '不计入账户')}}</text>
								<!-- <text v-if="record.accountBalance" class="account-balance">余额: ¥{{formatAmount(record.accountBalance)}}</text> -->
							</view>
						</view>
					</view>
					<view class="record-amount">
						<text :class="['amount-text', record.type === 'expense' ? 'expense' : 'income']">
							{{record.type === 'expense' ? '-' : '+'}}¥{{record.amount}}
						</text>
						<text class="record-time">{{formatTime(record.updatedAt)}}</text>
					</view>
				</view>
			</view>
			<view v-else class="empty-records">
				<view class="cute-cat">
					<view class="cat-face">
						<view class="cat-ears">
							<view class="ear left"></view>
							<view class="ear right"></view>
						</view>
						<view class="cat-eyes">
							<view class="eye left">
								<view class="pupil"></view>
								<view class="sparkle"></view>
							</view>
							<view class="eye right">
								<view class="pupil"></view>
								<view class="sparkle"></view>
							</view>
						</view>
						<view class="cat-nose"></view>
						<view class="cat-mouth">
							<view class="mouth-line"></view>
						</view>
						<view class="cat-whiskers">
							<view class="whisker left-top"></view>
							<view class="whisker left-bottom"></view>
							<view class="whisker right-top"></view>
							<view class="whisker right-bottom"></view>
						</view>
					</view>
					<view class="cat-body">
						<view class="cat-paws">
							<view class="paw left"></view>
							<view class="paw right"></view>
						</view>
					</view>
				</view>
				<text class="empty-text">哎呀,当前时间没有记录呢~</text>
				<text class="empty-desc">点击上方按钮开始记账吧</text>
			</view>
		</view>

		<!-- 分类统计 -->
		<view class="category-section bottom-content-area">
			<view class="section-header">
				<text class="section-title">本月分类统计</text>
				<view class="category-type-switcher">
					<view 
						:class="['type-btn', categoryType === 'EXPENSE' ? 'active' : '']"
						@click="switchCategoryType('EXPENSE')"
					>
						<text class="type-text">支出</text>
					</view>
					<view 
						:class="['type-btn', categoryType === 'INCOME' ? 'active' : '']"
						@click="switchCategoryType('INCOME')"
					>
						<text class="type-text">收入</text>
					</view>
				</view>
			</view>
			<view class="category-list" v-if="topCategories.length > 0">
				<view v-for="(category, index) in topCategories" :key="index" class="category-item" @click="viewCategoryDetail(category)">
					<view class="category-info">
						<text class="category-name">{{category.name}}</text>
						<text class="category-amount">¥{{category.amount}}</text>
					</view>
					<view class="category-progress">
						<view class="progress-bar">
							<view class="progress-fill" :style="{width: category.percentage + '%'}"></view>
						</view>
						<text class="progress-text">{{category.percentage}}%</text>
					</view>
					<view class="category-arrow">
						<text class="arrow-icon">›</text>
					</view>
				</view>
			</view>
			<view v-else class="empty-categories">
				<view class="empty-cat-small">
					<view class="cat-face-small">
						<view class="cat-ears-small">
							<view class="ear-small left"></view>
							<view class="ear-small right"></view>
						</view>
						<view class="cat-eyes-small">
							<view class="eye-small left"></view>
							<view class="eye-small right"></view>
						</view>
						<view class="cat-nose-small"></view>
					</view>
				</view>
				<text class="empty-text">暂无{{categoryType === 'EXPENSE' ? '支出' : '收入'}}数据</text>
				<text class="empty-desc">开始记账后这里会显示分类统计哦~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { recordAPI, categoryAPI, apiUtils } from '@/utils/api.js'
	import { formatTime } from '@/utils/index.js'
	
	export default {
		data() {
			return {
				currentYear: new Date().getFullYear(),
				currentMonth: new Date().getMonth() + 1,
				monthlyExpense: 0,
				monthlyIncome: 0,
				monthlyBalance: 0,
				recentRecords: [],
				topCategories: [],
				expenseCategories: [],
				incomeCategories: [],
				isLoading: false,
				isFirstLoad: true,
				categoryType: 'EXPENSE' 
			}
		},
		onLoad() {
			// 检查登录状态
			if (!apiUtils.isLoggedIn()) {
				uni.reLaunch({
					url: '/pages/login/login'
				});
				return;
			}
			this.isFirstLoad = true
			this.loadDataWithLoading()
			this.loadCategories()
		},
		onShow() {
			if (!this.isFirstLoad) {
				this.loadDataWithLoading()
			}
		},
		onPullDownRefresh() {
			this.loadData()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			formatTime, // Make formatTime available in the template
			async loadDataWithLoading() {
				if (this.isLoading) {
					return
				}
				
				this.isLoading = true
				try {
					await Promise.all([
						this.loadMonthlyData(),
						this.loadRecentRecords(),
						this.loadTopCategories()
					])
					this.isFirstLoad = false
				} catch (error) {
					// 显示重试提示
					this.showRetryOption()
				} finally {
					this.isLoading = false
					console.log('加载状态已清除')
				}
			},
			loadData() {
				this.loadMonthlyData()
				this.loadRecentRecords()
				this.loadTopCategories()
			},
			async loadMonthlyData() {
				try {
					console.log('开始加载月度数据...')
					
					// 获取本月日期范围
					const startDate = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-01`
					const endDate = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-${new Date(this.currentYear, this.currentMonth, 0).getDate()}`
					// 调用后端API获取统计数据
					const overview = await recordAPI.getOverview(startDate, endDate)
					if (overview) {
						this.monthlyExpense = (overview.totalExpense || 0).toFixed(2)
						this.monthlyIncome = (overview.totalIncome || 0).toFixed(2)
						this.monthlyBalance = (overview.balance || 0).toFixed(2)
					} else {
						this.monthlyExpense = '0.00'
						this.monthlyIncome = '0.00'
						this.monthlyBalance = '0.00'
					}
				} catch (error) {
					console.error('加载月度数据失败:', error)
					console.error('错误详情:', error.message, error.stack)
					// 设置默认值
					this.monthlyExpense = '0.00'
					this.monthlyIncome = '0.00'
					this.monthlyBalance = '0.00'
				}
			},
			async loadRecentRecords() {
				try {
					// 获取本月日期范围
					const startDate = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-01`
					const endDate = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-${new Date(this.currentYear, this.currentMonth, 0).getDate()}`
					
					// 调用后端API获取记录
					const records = await recordAPI.getByDateRange(startDate, endDate)
					 this.recentRecords = await recordAPI.getByDateRange(startDate, endDate)
					
					if (!records || !Array.isArray(records)) {
						console.warn('API返回的数据格式不正确:', records)
						this.recentRecords = []
						return
					}
					
					// 按时间倒序排列，取前5条
					// this.recentRecords = records
					// 	.sort((a, b) => {
					// 		const dateA = new Date(a.recordDate || a.date || a.createdAt)
					// 		const dateB = new Date(b.recordDate || b.date || b.createdAt)
					// 		return dateB - dateA
					// 	})
					// 	.slice(0, 5)
					// 	.map(record => {
					// 		// 兼容两种数据结构：直接字段或嵌套在account对象中
					// 		const accountName = record.accountName || record.account?.name
					// 		const accountIcon = record.accountIcon || record.account?.icon
					// 		const accountType = record.accountType || record.account?.accountType
					// 		const accountBalance = record.accountBalanceAfter || record.balanceAfter || record.account?.balanceAfter
					// 		return {
					// 			id: record.id,
					// 			type: (record.recordType || record.type || 'expense').toLowerCase(),
					// 			amount: record.amount || 0,
					// 			category: record.category?.name || record.categoryName || '未分类',
					// 			note: record.note || record.description || '',
					// 			date: record.recordDate || record.date || record.createdAt,
					// 			accountName: accountName,
					// 			accountIcon: accountIcon,
					// 			accountType: accountType,
					// 			accountId: record.accountId,
					// 			accountBalance: accountBalance
					// 		}
					// 	})
					
					// console.log('处理后的最近记录:', this.recentRecords)
				} catch (error) {
					uni.showToast({
						title: '加载记录失败: ' + error.message,
						icon: 'none',
						duration: 3000
					})
					this.recentRecords = []
				}
			},
			async loadTopCategories() {
				try {
					console.log('开始加载分类统计，类型:', this.categoryType)
					// 获取本月日期范围
					const startDate = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-01`
					const endDate = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-${new Date(this.currentYear, this.currentMonth, 0).getDate()}`
					// 调用后端API获取分类统计
					const categoryStats = await recordAPI.getCategoryStats(this.categoryType, startDate, endDate)
					
					if (!categoryStats || categoryStats.length === 0) {
						this.topCategories = []
						return
					}
					
					// 转换为前端需要的格式
					this.topCategories = categoryStats
						.map(item => ({
							name: item.categoryName,
							amount: item.amount.toFixed(2),
							percentage: item.percentage.toFixed(1),
							type: this.categoryType
						}))
						.sort((a, b) => parseFloat(b.amount) - parseFloat(a.amount))
						.slice(0, 5)
					
				} catch (error) {
					console.error('加载分类统计失败:', error)
					this.topCategories = []
				}
			},
			
			// 加载分类数据
			async loadCategories() {
				try {
					// 获取支出分类
					const expenseCategories = await categoryAPI.getByType('EXPENSE')
					this.expenseCategories = expenseCategories.map(cat => ({
						id: cat.id,
						name: cat.name,
						icon: this.getIconEmoji(cat.icon)
					}))
					
					// 获取收入分类
					const incomeCategories = await categoryAPI.getByType('INCOME')
					this.incomeCategories = incomeCategories.map(cat => ({
						id: cat.id,
						name: cat.name,
						icon: this.getIconEmoji(cat.icon)
					}))
				} catch (error) {
					console.error('加载分类失败:', error)
				}
			},
			getIconEmoji(iconName) {
				// 图标名称到emoji的映射
				const iconMap = {
					// 收入分类
					'money': '💰',
					'gift': '🎁',
					'trending-up': '📈',
					'briefcase': '💼',
					'bar-chart': '📊',
					
					// 支出分类
					'restaurant': '🍽️',
					'car': '🚗',
					'shopping-cart': '🛒',
					'gamepad': '🎮',
					'medical': '🏥',
					'book': '📚',
					'home': '🏠',
					'list': '📝'
				}
				
				return iconMap[iconName] || '📝' // 默认图标
			},
			changeMonth(delta) {
				let newMonth = this.currentMonth + delta
				let newYear = this.currentYear
				
				if (newMonth > 12) {
					newMonth = 1
					newYear++
				} else if (newMonth < 1) {
					newMonth = 12
					newYear--
				}
				
				this.currentMonth = newMonth
				this.currentYear = newYear
				this.loadDataWithLoading()
			},
			showRetryOption() {
				uni.showModal({
					title: '数据加载失败',
					content: '无法加载记账数据，是否重试？',
					confirmText: '重试',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('用户选择重试')
							this.loadDataWithLoading()
						}
					}
				})
			},
			
			// 切换分类类型
			switchCategoryType(type) {
				if (this.categoryType === type) return
				
				console.log('切换分类类型:', this.categoryType, '->', type)
				this.categoryType = type
				this.loadTopCategories()
			},
			
			getCategoryIcon(categoryName, type) {
				// 从已加载的分类中查找图标
				const categoryList = type === 'expense' ? this.expenseCategories : this.incomeCategories
				const category = categoryList.find(cat => cat.name === categoryName)
				return category ? category.icon : '📝'
			},
			
			getAccountTypeDisplay(accountType) {
				// 账户类型的中文显示映射
				const typeMap = {
					'CASH': '现金',
					'BANK_CARD': '银行卡',
					'CREDIT_CARD': '信用卡',
					'ALIPAY': '支付宝',
					'WECHAT': '微信',
					'OTHER': '其他',
					'NOT_COUNTED': '不计入'
				}
				return typeMap[accountType] || accountType
			},
			formatAmount(amount) {
				if (!amount && amount !== 0) return '0.00'
				return parseFloat(amount).toFixed(2)
			},
			
			
			showAddModal() {
				this.$emit('show-modal')
			},
			viewAllRecords() {
				// 跳转到记录列表页面
				uni.navigateTo({
					url: '/pages/records/records'
				})
			},
			viewCategoryDetail(category) {
				// 跳转到分类详情页面，传递分类信息
				const categoryData = encodeURIComponent(JSON.stringify({
					name: category.name,
					type: this.categoryType,
					amount: category.amount,
					percentage: category.percentage,
					year: this.currentYear,
					month: this.currentMonth
				}))
				
				uni.navigateTo({
					url: `/pages/category-detail/category-detail?data=${categoryData}`
				})
			},
			editRecord(record) {
				// 显示编辑弹窗
				this.editRecordData = record
				this.showModal = true
			}
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss';
	
	.container {
		background: $cute-gradient-bg;
		padding-top: var(--status-bar-height);
		padding-bottom: 120rpx; /* 为底部导航栏预留空间 */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	/* 顶部收支概览 */
	.overview-section {
		background: $cute-gradient-primary;
		padding: 40rpx 30rpx;
		color: $cute-text-inverse;
		position: relative;
		overflow: hidden;
		border-radius: 0 0 40rpx 40rpx;
		
		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -20%;
			width: 200rpx;
			height: 200rpx;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 50%;
			animation: float 6s ease-in-out infinite;
		}
		
		&::after {
			content: '';
			position: absolute;
			bottom: -30%;
			left: -10%;
			width: 150rpx;
			height: 150rpx;
			background: rgba(255, 182, 193, 0.15);
			border-radius: 50%;
			animation: float 8s ease-in-out infinite reverse;
		}
	}

	@keyframes float {
		0%, 100% { transform: translateY(0px) rotate(0deg); }
		50% { transform: translateY(-20px) rotate(180deg); }
	}

	.month-selector {
		text-align: center;
		margin-bottom: 30rpx;
		position: relative;
		z-index: 1;
	}

	.month-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.nav-btn {
		font-size: 40rpx;
		font-weight: bold;
		color: $cute-text-inverse;
		opacity: 0.8;
		transition: $cute-transition;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		
		&:active {
			transform: $cute-active-transform;
			opacity: 1;
			background: rgba(255, 255, 255, 0.3);
		}
	}

	.month-text {
		font-size: 48rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.year-text {
		font-size: 32rpx;
		opacity: 0.8;
	}

	.balance-info {
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 1;
		gap: 20rpx;
	}

	.balance-item {
		text-align: center;
		flex: 1;
		background: rgba(255, 255, 255, 0.2);
		padding: 25rpx 15rpx;
		border-radius: 25rpx;
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		transition: $cute-transition;
		
		&:hover {
			transform: $cute-hover-transform;
			background: rgba(255, 255, 255, 0.25);
		}
	}

	.balance-label {
		display: block;
		font-size: 28rpx;
		opacity: 0.9;
		margin-bottom: 10rpx;
	}

	.balance-amount {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
	}

	.expense {
		color: $cute-error;
	}

	.income {
		color: $cute-success;
	}

	.balance {
		color: $cute-warning;
	}

	/* 快速记账按钮 */
	.quick-add-section {
		padding: 30rpx;
		background: $cute-bg-secondary;
		margin: 20rpx;
		border-radius: $cute-border-radius;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}

	.quick-add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background: $cute-gradient-accent;
		color: $cute-text-inverse;
		padding: 35rpx;
		border-radius: $cute-border-radius;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			transition: left 0.5s;
		}
		
		&:active {
			transform: $cute-active-transform;
			box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.4);
			
			&::before {
				left: 100%;
			}
		}
	}

	.quick-add-icon {
		font-size: 48rpx;
		margin-right: 20rpx;
		font-weight: bold;
	}

	.quick-add-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	/* 最近记录 */
	.recent-section {
		background: $cute-bg-secondary;
		margin: 20rpx;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	/* 分类类型切换器 */
	.category-type-switcher {
		display: flex;
		background: $cute-bg-tertiary;
		border-radius: 25rpx;
		padding: 4rpx;
		border: 2rpx solid $cute-border;
	}

	.type-btn {
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		transition: all 0.3s ease;
		cursor: pointer;
		
		&.active {
			background: $cute-primary;
			box-shadow: 0 4rpx 12rpx rgba(144, 238, 144, 0.3);
		}
		
		&:not(.active):hover {
			background: $cute-bg-secondary;
		}
	}

	.type-text {
		font-size: 26rpx;
		font-weight: 500;
		transition: color 0.3s ease;
		
		.type-btn.active & {
			color: $cute-text-inverse;
		}
		
		.type-btn:not(.active) & {
			color: $cute-text-secondary;
		}
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $cute-text-primary;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			bottom: -8rpx;
			left: 0;
			width: 100%;
			height: 4rpx;
			background: $cute-gradient-accent;
			border-radius: 2rpx;
		}
	}

	.section-more {
		font-size: 28rpx;
		color: $cute-primary;
		transition: color 0.3s ease;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: rgba(144, 238, 144, 0.1);
		
		&:active {
			color: $cute-primary-dark;
			background: rgba(144, 238, 144, 0.2);
		}
	}

	.record-list {
		overflow-y: auto;
	}

	.record-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 2rpx solid $cute-divider;
		transition: $cute-transition;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background: $cute-bg-tertiary;
			border-radius: 20rpx;
			padding: 25rpx 15rpx;
			margin: 0 -15rpx;
			transform: $cute-hover-transform;
		}
	}

	.record-icon {
		width: 80rpx;
		height: 80rpx;
		background: $cute-gradient-accent;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 25rpx;
		box-shadow: $cute-button-shadow;
		transition: $cute-transition;
		
		&:hover {
			transform: scale(1.1) rotate(5deg);
		}
	}

	.icon-text {
		font-size: 36rpx;
	}

	.record-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.record-main-line {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}
	
	.record-sub-line {
		display: flex;
		align-items: center;
	}

	.record-category {
		font-size: 30rpx;
		color: $cute-text-primary;
		font-weight: 500;
		margin-right: 12rpx;
	}

	.record-details {
		display: flex;
		flex-direction: column;
		margin-top: 5rpx;
	}

	.record-note {
		font-size: 24rpx;
		color: $cute-text-secondary;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.account-info {
		display: flex;
		align-items: center;
		margin-top: 3rpx;
	}

	.account-icon {
		font-size: 20rpx;
		margin-right: 8rpx;
	}

	.account-name {
		font-size: 22rpx;
		color: $cute-text-tertiary;
		background: $cute-bg-tertiary;
		padding: 2rpx 8rpx;
		border-radius: 8rpx;
	}
	
	.account-type {
		font-size: 24rpx;
		color: $cute-text-secondary;
		background: $cute-bg-tertiary;
		padding: 4rpx 12rpx;
		border-radius: 10rpx;
		margin-left: 8rpx;
		font-weight: 500;
	}
	
	.account-balance {
		font-size: 22rpx;
		color: $cute-primary-dark;
		margin-left: 8rpx;
		font-weight: 500;
	}

	.record-amount {
		text-align: right;
	}

	.amount-text {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.record-time {
		display: block;
		font-size: 24rpx;
		color: $cute-text-tertiary;
	}

	.empty-records {
		text-align: center;
		padding: 80rpx 0;
		color: $cute-text-tertiary;
	}

	.empty-text {
		font-size: 36rpx;
		margin-bottom: 20rpx;
		color: $cute-text-secondary;
	}

	.empty-desc {
		font-size: 28rpx;
		color: $cute-text-tertiary;
	}

	/* 加载状态样式 */
	.loading-state {
		text-align: center;
		padding: 60rpx 0;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto 20rpx;
		border: 4rpx solid $cute-border;
		border-top-color: $cute-primary;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	.loading-text {
		font-size: 28rpx;
		color: $cute-text-secondary;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	/* 可爱卡通猫样式 */
	.cute-cat {
		width: 200rpx;
		height: 200rpx;
		margin: 0 auto 40rpx;
		position: relative;
		animation: catBounce 3s ease-in-out infinite;
	}

	@keyframes catBounce {
		0%, 100% { transform: translateY(0px) rotate(0deg); }
		25% { transform: translateY(-10px) rotate(2deg); }
		75% { transform: translateY(-5px) rotate(-1deg); }
	}

	.cat-face {
		width: 160rpx;
		height: 160rpx;
		background: $cute-gradient-accent;
		border-radius: 50%;
		position: relative;
		margin: 0 auto;
		box-shadow: 0 8rpx 25rpx rgba(255, 182, 193, 0.3);
	}

	.cat-ears {
		position: absolute;
		top: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 60rpx;
	}

	.ear {
		position: absolute;
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 40rpx solid $cute-accent-dark;
		top: 0;
	}

	.ear.left {
		left: 20rpx;
		transform: rotate(-15deg);
	}

	.ear.right {
		right: 20rpx;
		transform: rotate(15deg);
	}

	.cat-eyes {
		position: absolute;
		top: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100rpx;
		height: 40rpx;
	}

	.eye {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		background: white;
		border-radius: 50%;
		top: 0;
		animation: blink 4s ease-in-out infinite;
	}

	@keyframes blink {
		0%, 90%, 100% { transform: scaleY(1); }
		95% { transform: scaleY(0.1); }
	}

	.eye.left {
		left: 10rpx;
	}

	.eye.right {
		right: 10rpx;
	}

	.pupil {
		width: 15rpx;
		height: 15rpx;
		background: $cute-text-primary;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.sparkle {
		width: 8rpx;
		height: 8rpx;
		background: white;
		border-radius: 50%;
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		animation: sparkle 2s ease-in-out infinite;
	}

	@keyframes sparkle {
		0%, 100% { opacity: 1; transform: scale(1); }
		50% { opacity: 0.5; transform: scale(1.2); }
	}

	.cat-nose {
		width: 8rpx;
		height: 6rpx;
		background: $cute-accent-dark;
		border-radius: 50%;
		position: absolute;
		top: 90rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.cat-mouth {
		position: absolute;
		top: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.mouth-line {
		width: 20rpx;
		height: 2rpx;
		background: $cute-accent-dark;
		border-radius: 1rpx;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			top: -8rpx;
			left: 0;
			width: 8rpx;
			height: 2rpx;
			background: $cute-accent-dark;
			border-radius: 1rpx;
			transform: rotate(-15deg);
		}
		
		&::after {
			content: '';
			position: absolute;
			top: -8rpx;
			right: 0;
			width: 8rpx;
			height: 2rpx;
			background: $cute-accent-dark;
			border-radius: 1rpx;
			transform: rotate(15deg);
		}
	}

	.cat-whiskers {
		position: absolute;
		top: 85rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 20rpx;
	}

	.whisker {
		position: absolute;
		width: 25rpx;
		height: 2rpx;
		background: $cute-accent-dark;
		border-radius: 1rpx;
	}

	.whisker.left-top {
		left: 0;
		top: 0;
		transform: rotate(-15deg);
	}

	.whisker.left-bottom {
		left: 0;
		bottom: 0;
		transform: rotate(15deg);
	}

	.whisker.right-top {
		right: 0;
		top: 0;
		transform: rotate(15deg);
	}

	.whisker.right-bottom {
		right: 0;
		bottom: 0;
		transform: rotate(-15deg);
	}

	.cat-body {
		width: 120rpx;
		height: 80rpx;
		background: $cute-gradient-accent;
		border-radius: 60rpx 60rpx 40rpx 40rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 0 4rpx 15rpx rgba(255, 182, 193, 0.3);
	}

	.cat-paws {
		position: absolute;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 30rpx;
	}

	.paw {
		position: absolute;
		width: 20rpx;
		height: 25rpx;
		background: $cute-accent-light;
		border-radius: 10rpx;
		bottom: 0;
		animation: pawWave 2s ease-in-out infinite;
	}

	.paw.left {
		left: 15rpx;
		animation-delay: 0s;
	}

	.paw.right {
		right: 15rpx;
		animation-delay: 1s;
	}

	@keyframes pawWave {
		0%, 100% { transform: translateY(0px) rotate(0deg); }
		50% { transform: translateY(-5px) rotate(5deg); }
	}

	/* 分类统计 */
	.category-section {
		background: $cute-bg-secondary;
		margin: 20rpx;
		border-radius: $cute-border-radius;
		padding: 30rpx;
		box-shadow: $cute-card-shadow;
		border: 2rpx solid $cute-border;
	}

	.category-list {
		padding: 0 20rpx;
	}

	.category-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid $cute-divider;
		cursor: pointer;
		transition: all 0.3s ease;
		
		&:hover {
			background: $cute-bg-tertiary;
			margin: 0 -30rpx;
			padding: 20rpx 30rpx;
			border-radius: 15rpx;
		}
		
		&:active {
			transform: scale(0.98);
		}
	}

	.category-item:last-child {
		border-bottom: none;
	}

	.category-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.category-name {
		font-size: 28rpx;
		color: $cute-text-primary;
		font-weight: 500;
	}

	.category-amount {
		font-size: 24rpx;
		color: $cute-text-secondary;
	}

	.category-progress {
		display: flex;
		align-items: center;
		gap: 15rpx;
		min-width: 120rpx;
	}

	.progress-bar {
		flex: 1;
		height: 8rpx;
		background: $cute-bg-tertiary;
		border-radius: 4rpx;
		overflow: hidden;
		min-width: 60rpx;
	}

	.progress-fill {
		height: 100%;
		background: $cute-gradient-primary;
		border-radius: 4rpx;
		transition: width 0.6s ease-out;
	}

	.progress-text {
		font-size: 22rpx;
		color: $cute-text-tertiary;
		min-width: 45rpx;
		text-align: right;
	}

	.category-arrow {
		margin-left: 20rpx;
		color: $cute-text-tertiary;
		transition: all 0.3s ease;
	}

	.arrow-icon {
		font-size: 32rpx;
		font-weight: bold;
		
		.category-item:hover & {
			color: $cute-primary;
			transform: translateX(5rpx);
		}
	}

	.empty-categories {
		text-align: center;
		padding: 50rpx 0;
		color: $cute-text-tertiary;
	}

	.empty-categories .empty-text {
		font-size: 28rpx;
		margin-bottom: 15rpx;
		color: $cute-text-secondary;
	}

	.empty-categories .empty-desc {
		font-size: 24rpx;
		color: $cute-text-tertiary;
		line-height: 1.5;
	}

	/* 可爱卡通猫样式 (小版) */
	.empty-cat-small {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto 20rpx;
		position: relative;
	}

	.cat-face-small {
		width: 80rpx;
		height: 80rpx;
		background: $cute-gradient-accent;
		border-radius: 50%;
		position: relative;
		margin: 0 auto;
		box-shadow: 0 4rpx 15rpx rgba(255, 182, 193, 0.3);
	}

	.cat-ears-small {
		position: absolute;
		top: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 30rpx;
	}

	.ear-small {
		position: absolute;
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 25rpx solid $cute-accent-dark;
		top: 0;
	}

	.ear-small.left {
		left: 15rpx;
		transform: rotate(-10deg);
	}

	.ear-small.right {
		right: 15rpx;
		transform: rotate(10deg);
	}

	.cat-eyes-small {
		position: absolute;
		top: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 50rpx;
		height: 20rpx;
	}

	.eye-small {
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: white;
		border-radius: 50%;
		top: 0;
		animation: blink-small 4s ease-in-out infinite;
	}

	@keyframes blink-small {
		0%, 90%, 100% { transform: scaleY(1); }
		95% { transform: scaleY(0.1); }
	}

	.eye-small.left {
		left: 5rpx;
	}

	.eye-small.right {
		right: 5rpx;
	}

	.cat-nose-small {
		width: 5rpx;
		height: 4rpx;
		background: $cute-accent-dark;
		border-radius: 50%;
		position: absolute;
		top: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
